<script setup>
import {defineAsyncComponent, ref} from "vue";
import {router} from "@inertiajs/vue3";
import {route} from "ziggy-js";
import useTable from "@/composables/useTable";
import useRequest from "@/composables/useRequest.js";
import {Message} from "@arco-design/web-vue";
import AppPage from "@/components/admin/layouts/AppPage.vue";
import RangeDate from "@/components/common/RangeDate.vue";

const FormPopup = defineAsyncComponent(() => import('./components/FormPopup.vue'));


const title = '账号管理 - 权限 - 设置'
const breadcrumbs = ref(['设置', '权限', '账号管理'])

defineProps({
    data: {
        type: Array,
        default: () => []
    },
    pagination: {
        type: Object,
        default: () => ({
            current: 1,
            pageSize: 10,
            total: 0,
            showTotal: true
        })
    },
    options: {
        type: Array,
        default: () => []
    }
})

const params = ref({
    name: '',
    phone: '',
    email: '',
    startDate: '',
    endDate: '',
    page: 1,
})
const {TableRef, bordered, scrollbar, scroll} = useTable()
const {deleteApi} = useRequest('admin.setting.permissions.accounts')
const searchFormRef = ref()

const handleSearch = () => {
    router.get(route('admin.setting.permissions.accounts.index'), params.value, {
            replace: true,
            preserveState: true // 保留其他状态
        }
    )
}
const handleReset = () => {
    params.value = {
        name: '',
        phone: '',
        email: '',
        startDate: '',
        endDate: '',
        page: 1,
    }
    handleSearch()
}
const handlePageChange = (page) => {
    params.value.page = page
    handleSearch()
}

const formPopupRef = ref()
const handleAdd = () => formPopupRef.value?.add()
const handleEdit = (id) => formPopupRef.value?.edit(id)

const handleDelete = async (id) => {
    await deleteApi(id)
    router.reload()
    Message.success('删除成功')
}
</script>

<template>
    <app-page :breadcrumbs :title>
        <a-card :style="{ borderRadius: '8px'}" class="custom-card" title="账号管理">
            <a-space :size="16" class="w-full" direction="vertical" fill>
                <a-form ref="searchFormRef" :model="params" auto-label-width>
                    <a-row :gutter="16">
                        <!-- 调整栅格响应式布局 -->
                        <a-col :lg="6" :md="12" :sm="24" :xs="24">
                            <a-form-item field="name" label="名称">
                                <a-input v-model="params.name" allow-clear placeholder="请输入名称"/>
                            </a-form-item>
                        </a-col>
                        <a-col :lg="6" :md="12" :sm="24" :xs="24">
                            <a-form-item field="phone" label="手机号">
                                <a-input v-model="params.phone" allow-clear placeholder="请输入手机号"/>
                            </a-form-item>
                        </a-col>
                        <a-col :lg="6" :md="12" :sm="24" :xs="24">
                            <a-form-item field="email" label="邮箱">
                                <a-input v-model="params.email" allow-clear placeholder="请输入邮箱"/>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :md="12" :lg="12">
                            <a-form-item label="时间">
                                <RangeDate
                                    v-model:end="params.endDate"
                                    v-model:start="params.startDate"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :md="12" :lg="12" class="flex-1">
                           <div class="flex gap-4 justify-end items-center">
                               <a-button type="primary" @click="handleSearch">搜索</a-button>
                               <a-button @click="handleReset">重置</a-button>
                           </div>
                        </a-col>
                    </a-row>
                </a-form>

                <a-space align="start" wrap>
                    <a-button type="primary" @click="handleAdd"> 新增账号</a-button>
                </a-space>

                <a-table
                    ref="TableRef"
                    :bordered
                    :data="data"
                    :pagination
                    :scroll
                    :scrollbar
                    :table-layout-fixed="true"
                    row-key="id"
                    @page-change="handlePageChange"
                >
                    <template #columns>
                        <a-table-column :width="80" data-index="id" title="ID"/>
                        <a-table-column :width="80" data-index="avatar" title="头像">
                            <template #cell="{ record }">
                                <a-avatar :size="32">
                                    <img :src="record.avatar" alt="">
                                </a-avatar>
                            </template>
                        </a-table-column>
                        <a-table-column :min-width="140" data-index="name" title="名称"/>
                        <a-table-column :width="140" data-index="phone" title="手机号"/>
                        <a-table-column :width="180" data-index="email" title="邮箱"/>
                        <a-table-column :width="180" data-index="role" title="角色">
                            <template #cell="{ record }">
                                <div class="flex gap-1">
                                    <a-tag v-for="role in record.roles" v-if="record.roles.length > 0" :key="role">
                                        {{ role}}
                                    </a-tag>
                                    <a-tag v-else class="text-red-500">无</a-tag>
                                </div>
                            </template>
                        </a-table-column>
                        <a-table-column :width="100" data-index="status" title="状态">
                            <template #cell="{ record }">
                                <a-tag :color="record.status === 1 ? 'cyan' : 'red'">
                                    {{ record.status === 1 ? '正常' : '禁用' }}
                                </a-tag>
                            </template>
                        </a-table-column>
                        <a-table-column :width="120" data-index="created_at" title="创建时间"/>
                        <a-table-column :width="120" fixed="right" title="操作">
                            <template #cell="{ record }">
                                <a-space>
                                    <a-link @click="handleEdit(record.id)"> 编辑</a-link>

                                    <a-popconfirm
                                        content="您确定要删除该项吗?"
                                        type="warning"
                                        @ok="() => handleDelete(record.id)"
                                    >
                                        <a-link status="danger"> 删除</a-link>
                                    </a-popconfirm>
                                </a-space>
                            </template>
                        </a-table-column>
                    </template>
                </a-table>

            </a-space>
            <form-popup ref="formPopupRef"  @success="router.reload()"/>
        </a-card>
    </app-page>
</template>

<style scoped>

</style>
